<template>
  <div class="searchSty">
    <div>
      <a-form-model :model="searchForm" ref="searchForm">
        <a-row>
          <a-col :span="9">
            <a-form-model-item label='Bean名称' prop='beanName' :labelCol="{span: 5}" :wrapperCol="{span: 12, offset: 1}">
              <a-input v-model="searchForm.beanName" placeholder="请输入文件名称" allow-clear/>
            </a-form-model-item>
          </a-col>
          <a-col :span="9">
            <a-form-model-item prop='updateTime' label='执行时间' :labelCol="{span: 5}" :wrapperCol="{span: 12, offset: 1}">
              <a-range-picker v-model="searchForm.updateTime" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm" @change="onDateChange" allow-clear/>
            </a-form-model-item>
          </a-col>
          <a-col :span="4" class="btnStyle">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div>
      <a-button @click="del" v-hasPermission="['jobLog:delete']">删除</a-button>
      <a-button @click="exportExcel" v-hasPermission="['jobLog:export']">导出excel</a-button>
    </div>
    <div style="margin-top:16px;">
      <a-table :data-source="tableItem.data" :columns="tableItem.columns" :rowKey="(record, index) => {return index}" :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :pagination="false">
      </a-table>
    </div>
    <div class="page-box">
      <a-pagination :total="tableItem.total" :show-total="pagination.showTotal" :page-size="searchForm.pageSize" show-size-changer @change="onChange" @showSizeChange="onShowSizeChange" :page-size-options="pagination.pageSizeOptions"/>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      searchForm: {
        beanName: '',
        createTimeFrom: '',
        createTimeTo: '',
        pageNum: 1,
        pageSize: 10
      },
      tableItem: {
        columns: [
          {
            title: 'LOG_ID',
            dataIndex: 'logId',
            align: 'center'
          },
          {
            title: 'Bean名称',
            dataIndex: 'beanName',
            align: 'center'
          },
          {
            title: '方法名称',
            dataIndex: 'methodName',
            align: 'center'
          },
          {
            title: '方法参数',
            dataIndex: 'params',
            align: 'center'
          },
          {
            title: '状态',
            dataIndex: 'status',
            align: 'center',
            customRender: (status) => {
              switch (status) {
                case '0':
                  return <a-tag color="green">正常</a-tag>
                case '1':
                  return <a-tag color="red">失败</a-tag>
                case '2':
                  return <a-tag color="blue">运行中</a-tag>
                default:
                  return status
              }
            }
          },
          {
            title: '异常信息',
            dataIndex: 'error',
            align: 'center'
          },
          {
            title: '耗时(毫秒)',
            dataIndex: 'times',
            align: 'center'
          },
          {
            title: '执行时间',
            dataIndex: 'createTime',
            align: 'center'
          }
        ],
        data: [],
        total: 0
      },
      selectedRowKeys: [],
      selectedRows: [],
      pagination: {
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      }
    }
  },
  methods: {
    getData () {
      this.$get('job/log', this.searchForm).then(res => {
        this.tableItem.data = res.data.rows
        this.tableItem.total = res.data.total
      })
    },
    onDateChange (val, obj) {
      this.searchForm.createTimeFrom = obj[0]
      this.searchForm.createTimeTo = obj[1]
    },
    search () {
      this.searchForm.pageNum = 1
      this.getData()
    },
    reset () {
      this.$refs.searchForm.resetFields()
      this.searchForm.createTimeFrom = ''
      this.searchForm.createTimeTo = ''
      this.searchForm.pageNum = 1
      this.searchForm.pageSize = 10
      this.getData()
    },
    onChange (pageNum) {
      this.searchForm.pageNum = pageNum
      this.getData()
    },
    onShowSizeChange (current, pageSize) {
      this.searchForm.pageNum = 1
      this.searchForm.pageSize = pageSize
      this.getData()
    },
    del () {
      if (this.selectedRowKeys.length === 0) {
        this.$message.warning('请选择需要删除的记录')
      } else {
        let arr = []
        this.selectedRows.forEach(item => {
          arr.push(item.logId)
        })
        let joblogIds = arr.join(',')
        let that = this
        this.$confirm({
          title: '确定删除所选中的记录?',
          content: '当您点击确定按钮后，这些记录将会被彻底删除',
          onOk () {
            that.$delete('job/log/' + joblogIds).then(() => {
              that.$message.success('删除成功')
              that.selectedRowKeys = []
              that.getData()
            })
          }
        })
      }
    },
    exportExcel () {
      this.$export('job/log/excel', this.searchForm)
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    }
  },
  mounted () {
    this.getData()
  }
}
</script>
<style lang='less' scoped>
.searchSty {
  width: 100%;
  .btnStyle {
      display: flex;
      flex-wrap: nowrap;
      float: right;
      margin-top: 3px;
      // justify-content: space-around;
    }
}
.page-box {
  text-align: right;
  margin-top:16px;
}
</style>
